<template>
	<view class="module-item-card">
		<view class="wrap" :class="{ 'nonZeroFileNum': nonZeroFileNum }" :style="{ '--active-color': activeColor }">
			<view class="bg"></view>
			<view class="info">
				<view class="icon">
					<image :src="iconSrc" mode="scaleToFill">
					</image>
				</view>
				<view class="info-box">
					<view class="name">{{ rowData.name }}</view>
					<view class="remark">{{ rowData.remark || '我是' + rowData.name + '的备注' }}
					</view>
				</view>
			</view>
			<view class="number-box">
				<slot name="icon" :data="rowData">
					<view class="num">{{ rowData.fileNum || 0 }}</view>
					<view style="min-width: 112rpx;">文件数量</view>
				</slot>
			</view>
		</view>
	</view>
</template>
<script>
import {
	MODULE_COLORS
} from '@/const/modules';
export default {
	props: {
		rowData: {
			type: Object,
			required: true,
		},
	},
	computed: {
		nonZeroFileNum() {
			return this.rowData.fileNum && this.rowData.fileNum > 0;
		},
		activeColor() {
			return MODULE_COLORS[this.rowData.value];
		},
		iconSrc() {
			return `/static/aidex/images/icon-module-${this.rowData.value}.png`;
		},
	},
}
</script>
<style lang="scss" scoped>
.module-item-card {
	.wrap {
		padding: 34rpx 32rpx;
		width: 100%;
		min-height: 200rpx;
		max-height: 200rpx;
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		--active-color: #000;
		color: var(--active-color);
		box-shadow: 0px 1px 12rpx 0px rgba(182, 182, 182, 0.5);
		border-radius: 16rpx;
		// border-left: 12rpx solid var(--active-color);
		border-color: var(--active-color);
		position: relative;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0.05;
			top: 0;
			z-index: -1;
		}

		&.nonZeroFileNum {
			.bg {
				background-color: var(--active-color);
				opacity: 0.1;
				z-index: 1;
			}
		}

	}

	.info {
		display: flex;
		align-items: center;
		height: 100%;

		.icon {
			height: 100%;
			margin-right: 32rpx;

			image {
				min-width: 96rpx;
				width: 96rpx;
				height: 96rpx;
			}
		}

		.info-box {
			max-width: 280rpx;
			// padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				color: #242524;
				font-weight: bold;
				font-size: 32rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
				margin-bottom: 8rpx;
			}

			.remark {
				color: #2c2e2d;
				font-size: 28rpx;
				color: $u-tips-color;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}
	}

	.number-box {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		color: #2c2e2d;
		font-size: 28rpx;

		.num {
			// min-width: 112rpx;
			font-size: 48rpx;
		}
	}

}
</style>